<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="open"
    width="1200px"
    append-to-body
    :before-close="handleClose"
  >
    <template>
      <div>
        <div class="search-area" v-show="showSearch">
          <el-form
            :model="queryParams"
            @submit.native.prevent
            ref="queryForm"
            size="small"
            :inline="true"
            class="clearfix"
            label-width="auto"
          >
            <el-form-item label="费用类型" prop="expenseType">
              <el-select v-model="queryParams.expenseType" placeholder="请选择费用类型" clearable>
                <el-option
                  v-for="dict in dict.type.customer_expense_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="main-content">
          <el-row :gutter="10" class="mb24">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleOpenModel('AddExpense')"
                v-hasPermi="['biz:customer:relationship:add']"
                >新增</el-button
              >
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-table v-loading="loading" :data="expenseList">
            <el-table-column label="发生时间" align="center" prop="occurrenceTime" />
            <el-table-column label="费用类型" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.customer_expense_type" :value="scope.row.expenseType" />
              </template>
            </el-table-column>
            <el-table-column label="费用金额(元)" align="center" prop="expenseAmount">
              <template slot-scope="scope">
                {{ scope.row.expenseAmount.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column label="客情摘要" align="center" prop="customerSummary" />
            <el-table-column label="附件" align="center" prop="annexUrlList">
              <template slot-scope="scope">
                <div
                  :style="
                    scope.row.annexPreviewList && scope.row.annexPreviewList.length > 0 ? 'padding-top: 8px;' : ''
                  "
                >
                  <ImagePreview width="50px" height="50px" :src="scope.row.annexPreviewList" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  :disabled="disabled"
                  type="text"
                  size="mini"
                  @click="handleOpenModel('AddExpense', scope.row)"
                  v-hasPermi="['biz:customer:relationship:edit']"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['biz:customer:relationship:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <add-expense
          :show="modelName === 'AddExpense'"
          :dataSource="modelData"
          @refresh="getList"
          @cancel="handleOpenModel"
        ></add-expense>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { listByCustomerId, delRelationship } from '@/api/biz/customer'
import AddExpense from './AddExpense.vue'
export default {
  name: 'ExpenseList',
  components: {
    AddExpense,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String | Number,
      default: '',
    },
  },
  dicts: ['customer_expense_type'],
  data() {
    return {
      open: false,
      title: '',
      // 遮罩层
      loading: false,
      disabled: false,
      showSearch: true,
      queryParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        contractName: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
        contractNumber: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
        createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
        updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
      },
      dataSource: {},
      expenseList: [],
      total: 0,
      expenseTypeList: [],
      modelName: '',
      modelData: {},
    }
  },
  watch: {
    show: {
      handler(val) {
        this.open = val
      },
    },
    open: {
      handler(val) {
        if (val) {
          this.title = '客情维护'
          this.resetQuery()
        } else {
          this.$emit('cancel', false)
        }
      },
    },
  },
  methods: {
    getList() {
      this.loading = true
      listByCustomerId({ customerId: this.id, ...this.queryParams })
        .then((res) => {
          res.rows.map((i) => {
            if (i.annexDtoList) {
              i.annexPreviewList = i.annexDtoList.map((item) => item.url)
            } else {
              i.annexPreviewList = []
            }
          })
          this.expenseList = res.rows
          this.total = res.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleClose(done) {
      this.$emit('cancel', false)
      done()
    },
    // 取消按钮
    cancel() {
      this.reset()
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        expenseType: null,
      }
      this.getList()
    },
    handleDelete(row) {
      const id = row.id
      this.$modal
        .confirm('是否确认删除？')
        .then(function () {
          return delRelationship(id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    handleOpenModel(name = '', data = {}) {
      this.modelName = name
      data.customerId = this.id
      this.modelData = data
    },
  },
}
</script>
